<template>
  <div class="application-container">
    <h2 class="title">资源申请记录</h2>
    <el-table
        :data="applications"
        style="width: 100%"
        stripe
        v-loading="loading"
    >
      <el-table-column prop="username" label="申请人" width="120" />
      <el-table-column prop="projectName" label="项目名称" width="180" />
      <el-table-column prop="resourcesType" label="资源类型" width="120" />
      <el-table-column label="金额" width="120">
        <template slot-scope="{ row }">
          {{ row.amount | currency }}
        </template>
      </el-table-column>
      <el-table-column prop="describes" label="描述" />
      <el-table-column label="审核状态" width="120">
        <template slot-scope="{ row }">
          <el-tag :type="statusTagType(row.states)">
            {{ row.states | statusText }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="审核意见">
        <template slot-scope="{ row }">
          {{ row.opinion || '--' }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      applications: [],
      loading: false
    };
  },
  filters: {
    statusText(status) {
      const statusMap = {
        0: '待审核',
        1: '已通过',
        2: '已拒绝'
      };
      return statusMap[status] || '未知状态';
    },
    currency(value) {
      return '￥' + Number(value).toLocaleString();
    }
  },
  methods: {
    statusTagType(status) {
      const typeMap = {
        0: 'warning',
        1: 'success',
        2: 'danger'
      };
      return typeMap[status] || '';
    },
    async fetchApplications() {
      try {
        this.loading = true;
        this.$request.get('/project/selectResource')
            .then(res=>{
              this.applications = res.data;
            })
      } catch (error) {
        console.error('获取数据失败:', error);
        this.$message.error('数据加载失败');
      } finally {
        this.loading = false;
      }
    }
  },
  created() {
    this.fetchApplications();
  }
};
</script>

<style scoped>
.application-container {
  padding: 20px;
}
.title {
  margin-bottom: 20px;
  color: #303133;
}
</style>